import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title } = Typography;
const { TextArea } = Input;

export default function PreSaleScript() {
  const [form] = Form.useForm();
  const [isGenerating, setIsGenerating] = useState<boolean>(false);
  const [generatedContent, setGeneratedContent] = useState<string>('');
  const [tourVisible, setTourVisible] = useState(false);

  // 使用HTML元素的ref引用方式
  const productNameRef = useRef<HTMLDivElement>(null);
  const productTypeRef = useRef<HTMLDivElement>(null);
  const targetAudienceRef = useRef<HTMLDivElement>(null);
  const scriptStyleRef = useRef<HTMLDivElement>(null);
  const keyPointsRef = useRef<HTMLDivElement>(null);
  const generateButtonRef = useRef<HTMLDivElement>(null);
  const resultRef = useRef<HTMLDivElement>(null);

  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 定义steps配置
  const tourSteps = [
    {
      key: 'productName',
      title: '输入产品名称',
      description: '请输入您要销售的产品名称，这将用于生成个性化的话术',
    },
    {
      key: 'productType',
      title: '选择产品类型',
      description: '选择产品所属的类别，如电子产品、家居用品等',
    },
    {
      key: 'targetAudience',
      title: '选择目标受众',
      description: '选择产品的主要销售对象，如年轻人、家庭用户等',
    },
    {
      key: 'scriptStyle',
      title: '选择话术风格',
      description: '选择您希望的沟通风格，如亲切自然、专业权威等',
    },
    {
      key: 'keyPoints',
      title: '填写核心卖点（可选）',
      description: '输入产品的核心优势，用顿号分隔，如：高性能、低价格',
    },
    {
      key: 'generateButton',
      title: '生成售前话术',
      description: '完成所有设置后，点击此按钮生成专业的售前话术',
    },
    {
      key: 'result',
      title: '查看生成结果',
      description: '生成成功后，您可以在此处查看、复制或下载生成的话术内容',
    },
  ];

  // 组织ref引用
  const tourRefs = {
    productName: productNameRef,
    productType: productTypeRef,
    targetAudience: targetAudienceRef,
    scriptStyle: scriptStyleRef,
    keyPoints: keyPointsRef,
    generateButton: generateButtonRef,
    result: resultRef,
  };

  // 生成售前话术的模拟函数
  const generateContent = (
    productName: string,
    productType: string,
    targetAudience: string,
    scriptStyle: string,
    keyPoints: string,
    painPoints: string
  ): string => {
    // 这里是模拟生成内容的逻辑，实际应用中应该调用AI模型
    let result = '';

    // 开头问候
    if (scriptStyle === '亲切自然') {
      result += `${Math.random() > 0.5 ? '嗨！您好~' : '您好呀！'}看到您在浏览${productName || '我们的产品'}，${Math.random() > 0.5 ? '想为您简单介绍一下吗？' : '有什么可以帮到您的吗？'}😊\n\n`;
    } else if (scriptStyle === '专业权威') {
      result += `${Math.random() > 0.5 ? '您好！' : '尊敬的顾客：'}我是${Math.random() > 0.5 ? '产品顾问小李' : '专业客服小A'}，${Math.random() > 0.5 ? '很高兴为您介绍' : '关于'}${productName || '我们的产品'}。\n\n`;
    } else if (scriptStyle === '幽默活泼') {
      result += `${Math.random() > 0.5 ? '嘿！' : '嗨，亲爱的朋友！'}${Math.random() > 0.5 ? '被' + productName || '这款产品' + '吸引了吧？' : '看您在看' + productName || '我们的产品' + '，眼光真好！'}😉\n\n`;
    } else if (scriptStyle === '简洁高效') {
      result += `${productName || '我们的产品'}，${Math.random() > 0.5 ? '核心卖点：' : '主要特点：'}${keyPoints || '高品质、实用性强、价格实惠'}。${Math.random() > 0.5 ? '有兴趣了解详情吗？' : '需要详细介绍吗？'}\n\n`;
    }

    // 产品介绍
    if (productName) {
      result += `${Math.random() > 0.5 ? '这款' : productName}是${Math.random() > 0.5 ? '我们的' : ''}${Math.random() > 0.5 ? '明星产品' : '热销爆款'}，${Math.random() > 0.5 ? '已经帮助了' : '深受'}${Math.random() > 0.5 ? '数万名顾客解决了' : '众多'}${targetAudience === '年轻人' ? '时尚、潮流' : targetAudience === '家庭用户' ? '家庭生活' : targetAudience === '商务人士' ? '商务办公' : targetAudience === '老年人' ? '日常便利' : ''}方面的需求。\n\n`;

      // 根据产品类型生成特点介绍
      if (productType === '电子产品') {
        result += `${Math.random() > 0.5 ? '它采用了' : '产品使用了'}${Math.random() > 0.5 ? '最新的' : '先进的'}${Math.random() > 0.5 ? '技术' : '工艺'}，${Math.random() > 0.5 ? '具有' : '拥有'}${Math.random() > 0.5 ? '高性能' : '强大功能'}、${Math.random() > 0.5 ? '低能耗' : '节能省电'}、${Math.random() > 0.5 ? '长续航' : '耐用性强'}等特点。${Math.random() > 0.5 ? '无论是日常使用还是专业需求' : '无论是工作还是娱乐'}，${Math.random() > 0.5 ? '都能轻松满足' : '都能完美应对'}。\n\n`;
      } else if (productType === '家居用品') {
        result += `${Math.random() > 0.5 ? '这款产品设计精美' : '它的外观时尚'}，${Math.random() > 0.5 ? '材质环保健康' : '采用优质材料'}，${Math.random() > 0.5 ? '非常适合放在家里使用' : '能为您的家居增添温馨氛围'}。${Math.random() > 0.5 ? '它不仅实用' : '除了基本功能外'}，${Math.random() > 0.5 ? '还能提升您的生活品质' : '还具有多种实用功能'}。\n\n`;
      } else if (productType === '美妆个护') {
        result += `${Math.random() > 0.5 ? '产品成分天然温和' : '它采用了天然成分'}，${Math.random() > 0.5 ? '不刺激皮肤' : '对肌肤友好'}，${Math.random() > 0.5 ? '适合各种肤质使用' : '敏感肌肤也可以放心使用'}。${Math.random() > 0.5 ? '使用后能有效改善' : '坚持使用可以解决'}${painPoints || '肌肤干燥、暗沉等问题'}，${Math.random() > 0.5 ? '让您焕发自信光彩' : '恢复肌肤健康状态'}。\n\n`;
      } else if (productType === '服装鞋包') {
        result += `${Math.random() > 0.5 ? '这款产品款式时尚' : '它的设计潮流'}，${Math.random() > 0.5 ? '面料舒适透气' : '采用优质面料'}，${Math.random() > 0.5 ? '穿着舒适自在' : '质感出众'}。${Math.random() > 0.5 ? '它既可以日常穿搭' : '无论是休闲还是正式场合'}，${Math.random() > 0.5 ? '也可以搭配出各种风格' : '都能展现您的独特品味'}。\n\n`;
      } else if (productType === '食品饮料') {
        result += `${Math.random() > 0.5 ? '产品选料上乘' : '它采用优质原料'}，${Math.random() > 0.5 ? '制作工艺精湛' : '传统工艺制作'}，${Math.random() > 0.5 ? '口感独特美味' : '味道醇厚'}。${Math.random() > 0.5 ? '无论是自己享用还是送礼' : '自己吃或者送朋友'}，${Math.random() > 0.5 ? '都是非常不错的选择' : '都是绝佳选择'}。\n\n`;
      } else if (productType === '母婴用品') {
        result += `${Math.random() > 0.5 ? '这款产品专为宝宝设计' : '它是为婴幼儿量身定制的'}，${Math.random() > 0.5 ? '安全无刺激' : '材质安全无害'}，${Math.random() > 0.5 ? '符合严格的安全标准' : '通过多重安全检测'}。${Math.random() > 0.5 ? '能为宝宝提供贴心呵护' : '让您的宝宝健康成长'}，${Math.random() > 0.5 ? '是妈妈们的信赖之选' : '妈妈更放心'}。\n\n`;
      }
    }

    // 核心卖点
    if (keyPoints) {
      const points = keyPoints.split('、');
      result += `${Math.random() > 0.5 ? '它的核心优势在于' : '特别值得一提的是'}：\n`;
      points.forEach((point, index) => {
        result += `${index + 1}. ${point}${Math.random() > 0.5 ? '，这是市面上同类产品难以比拟的' : ''}${index < points.length - 1 ? '；\n' : '。\n\n'}`;
      });
    }

    // 解决痛点
    if (painPoints) {
      const pains = painPoints.split('、');
      result += `${Math.random() > 0.5 ? '您是否也在为' : '很多顾客都遇到过'}${pains.join('、')}等问题困扰？${Math.random() > 0.5 ? '这款产品恰好能帮您解决这些问题' : '别担心，我们的产品可以完美解决'}！\n\n`;
      result += `${Math.random() > 0.5 ? '使用后，您会发现' : '相信我，用了之后'}，${Math.random() > 0.5 ? '这些问题都将迎刃而解' : '这些困扰都会消失'}，${Math.random() > 0.5 ? '生活/工作会变得更加轻松愉快' : '您会拥有全新的体验'}。\n\n`;
    }

    // 根据目标受众调整话术
    if (targetAudience === '年轻人') {
      result += `${Math.random() > 0.5 ? '现在很多年轻人都在使用' : '这款产品特别受年轻人欢迎'}，${Math.random() > 0.5 ? '它时尚的外观和强大的功能' : '时尚的设计和实用的功能'}${Math.random() > 0.5 ? '非常符合年轻人的需求' : '正好满足年轻人的品味'}。${Math.random() > 0.5 ? '您也赶紧试试吧' : '您值得拥有'}！\n\n`;
    } else if (targetAudience === '家庭用户') {
      result += `${Math.random() > 0.5 ? '对于家庭用户来说' : '作为家庭必备品'}，${Math.random() > 0.5 ? '这款产品的实用性和性价比都很高' : '它的实用性强，价格也很实惠'}。${Math.random() > 0.5 ? '能为全家人的生活带来便利' : '可以满足全家人的需求'}。${Math.random() > 0.5 ? '很多家庭都在用呢' : '是家庭用户的首选'}！\n\n`;
    } else if (targetAudience === '商务人士') {
      result += `${Math.random() > 0.5 ? '对于商务人士而言' : '作为职场必备工具'}，${Math.random() > 0.5 ? '这款产品能大大提高您的工作效率' : '它能帮您提升工作效率'}，${Math.random() > 0.5 ? '让您的工作更加得心应手' : '让您在职场中脱颖而出'}。${Math.random() > 0.5 ? '很多成功人士都在使用' : '是商务精英的选择'}！\n\n`;
    } else if (targetAudience === '老年人') {
      result += `${Math.random() > 0.5 ? '这款产品操作简单' : '它设计得非常人性化'}，${Math.random() > 0.5 ? '特别适合老年人使用' : '老年人也能轻松上手'}。${Math.random() > 0.5 ? '它能为您的生活带来很多便利' : '能让您的晚年生活更加舒适'}。${Math.random() > 0.5 ? '送长辈也是非常不错的选择' : '是送给父母的理想礼物'}！\n\n`;
    }

    // 促进购买
    result += `${Math.random() > 0.5 ? '现在购买还有优惠活动哦' : '目前正在做促销活动'}！${Math.random() > 0.5 ? '下单即送精美礼品' : '可以享受XX折优惠'}，${Math.random() > 0.5 ? '活动时间有限' : '优惠数量有限'}，${Math.random() > 0.5 ? '建议您尽快下单' : '先到先得'}！\n\n`;

    // 根据风格结尾
    if (scriptStyle === '亲切自然') {
      result += `${Math.random() > 0.5 ? '不知道您对这款产品还有什么疑问吗？' : '您还有什么想了解的吗？'}${Math.random() > 0.5 ? '随时都可以问我哦~' : '我会耐心为您解答'}！😊\n`;
    } else if (scriptStyle === '专业权威') {
      result += `${Math.random() > 0.5 ? '作为专业人士' : '根据我的专业经验'}，${Math.random() > 0.5 ? '我非常推荐这款产品' : '这款产品确实值得购买'}。${Math.random() > 0.5 ? '如果您有任何专业问题' : '如有任何疑问'}，${Math.random() > 0.5 ? '欢迎随时咨询' : '我很乐意为您解答'}。\n`;
    } else if (scriptStyle === '幽默活泼') {
      result += `${Math.random() > 0.5 ? '怎么样？心动了吗？' : '是不是已经迫不及待想拥有了？'}${Math.random() > 0.5 ? '赶紧下单吧，手慢无~' : '现在就行动起来吧'}！🤩\n`;
    } else if (scriptStyle === '简洁高效') {
      result += `${Math.random() > 0.5 ? '总结来说' : '一句话'}，${Math.random() > 0.5 ? '这款产品物超所值' : '值得购买'}。${Math.random() > 0.5 ? '需要立即为您下单吗？' : '现在下单可以享受优惠'}。\n`;
    }

    // 免责声明
    result += `\n\n*本话术由智能客服自动生成，可根据实际情况进行调整使用。*`;

    return result;
  };

  // 处理表单提交
  const handleSubmit = async (values: any) => {
    try {
      setIsGenerating(true);
      const { productName, productType, targetAudience, scriptStyle, keyPoints, painPoints } = values;

      // 模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 1500));

      const generated = generateContent(productName, productType, targetAudience, scriptStyle, keyPoints, painPoints);
      setGeneratedContent(generated);
      message.success('售前话术生成成功！');
    } catch (error) {
      message.error('生成失败，请稍后重试');
    } finally {
      setIsGenerating(false);
    }
  };

  // 复制生成的内容
  const handleCopy = () => {
    navigator.clipboard.writeText(generatedContent).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败');
    });
  };

  // 下载生成的内容
  const handleDownload = () => {
    const blob = new Blob([generatedContent], { type: 'text/plain;charset=utf-8' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '售前话术.txt';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
    message.success('文件下载成功');
  };

  // 产品类型选项
  const productTypeOptions = [
    { label: '电子产品', value: '电子产品' },
    { label: '家居用品', value: '家居用品' },
    { label: '美妆个护', value: '美妆个护' },
    { label: '服装鞋包', value: '服装鞋包' },
    { label: '食品饮料', value: '食品饮料' },
    { label: '母婴用品', value: '母婴用品' },
    { label: '其他类型', value: '其他类型' },
  ];

  // 目标受众选项
  const targetAudienceOptions = [
    { label: '年轻人', value: '年轻人' },
    { label: '家庭用户', value: '家庭用户' },
    { label: '商务人士', value: '商务人士' },
    { label: '老年人', value: '老年人' },
    { label: '其他人群', value: '其他人群' },
  ];

  // 话术风格选项
  const scriptStyleOptions = [
    { label: '亲切自然', value: '亲切自然' },
    { label: '专业权威', value: '专业权威' },
    { label: '幽默活泼', value: '幽默活泼' },
    { label: '简洁高效', value: '简洁高效' },
  ];

  return (
    <>
      <div style={{ padding: '24px' }}>
        <Title level={2} style={{ display: 'flex', alignItems: 'center' }}>
          售前话术生成
          <TourGuideButton onClick={showTour} />
        </Title>
        <Card style={{ marginBottom: '24px' }}>
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={{
              productType: '电子产品',
              targetAudience: '年轻人',
              scriptStyle: '亲切自然',
            }}
          >
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <Form.Item
                  name="productName"
                  label="产品名称"
                  rules={[{ required: true, message: '请输入产品名称' }]}
                >
                  <div ref={productNameRef}>
                    <Input placeholder="请输入产品名称" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="productType"
                  label="产品类型"
                  rules={[{ required: true, message: '请选择产品类型' }]}
                >
                  <div ref={productTypeRef}>
                    <Select placeholder="请选择产品类型" options={productTypeOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="targetAudience"
                  label="目标受众"
                  rules={[{ required: true, message: '请选择目标受众' }]}
                >
                  <div ref={targetAudienceRef}>
                    <Select placeholder="请选择目标受众" options={targetAudienceOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="scriptStyle"
                  label="话术风格"
                  rules={[{ required: true, message: '请选择话术风格' }]}
                >
                  <div ref={scriptStyleRef}>
                    <Select placeholder="请选择话术风格" options={scriptStyleOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="keyPoints"
                  label="核心卖点（可选）"
                >
                  <div ref={keyPointsRef}>
                    <TextArea rows={2} placeholder="请输入产品的核心卖点，用顿号分隔，如：高性能、低价格、长续航" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="painPoints"
                  label="解决痛点（可选）"
                >
                  <TextArea rows={2} placeholder="请输入产品解决的用户痛点，用顿号分隔，如：续航短、操作复杂、价格高" />
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item>
                  <div ref={generateButtonRef}>
                    <Button type="primary" htmlType="submit" loading={isGenerating} style={{ width: '100%' }}>
                      {isGenerating ? <Spin /> : '生成售前话术'}
                    </Button>
                  </div>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>

        {generatedContent && (
          <Card title="生成结果" extra={
            <div style={{ display: 'flex', gap: '8px' }}>
              <Button icon={<CopyOutlined />} onClick={handleCopy}>复制</Button>
              <Button icon={<DownloadOutlined />} onClick={handleDownload}>下载</Button>
            </div>
          }>
            <div ref={resultRef} style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: 1.6 }}>
              {generatedContent}
            </div>
          </Card>
        )}
      </div>

      <CommonTour
        open={tourVisible}
        steps={tourSteps}
        targetRefs={tourRefs}
        onClose={() => setTourVisible(false)}
      />
    </>
  );
}